<template>
	<view class="container" v-if="task.task_id">
		<!-- 顶部操作栏 -->
		<view class="header dis-flex flex-x-between">
			<form @submit="onTargetHome" report-submit="true">
				<button formType="submit" class="btn-normal">
					<view class="item-touch"><text>返回首页</text></view>
				</button>
			</form>
			<form @submit="onToggleRules" report-submit="true">
				<button formType="submit" class="btn-normal">
					<view class="item-touch"><text>玩法详情</text></view>
				</button>
			</form>
		</view>
		<view class="content">
			<!-- 砍价信息 -->
			<view class="infos-wrap">
				<view class="infos-top">
					<view class="infos-img"><image :src="task.user.avatarUrl"></image></view>
					<view class="infos-name">
						<text>{{ task.user.nickName }}</text>
					</view>
				</view>
				<view class="infos-mask">
					<view class="infos-prompt" v-if="active.prompt_words">
						<text>{{ active.prompt_words }}</text>
					</view>
					<!-- 商品信息 -->
					<form @submit="onTargetGoods" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="infos-item">
								<view class="infos-item-img"><image :src="goods.goods_image"></image></view>
								<view class="infos-item-info">
									<view class="infos-item-name">
										<text class="twolist-hidden">{{ goods.goods_name }}</text>
									</view>
									<view class="infos-item-stock">
										<view class="stock-widget">
											<text>仅剩{{ goods.goods_sku.stock_num }}件</text>
										</view>
									</view>
									<view class="infos-item-price dis-flex flex-y-end">
										<text class="price1 col-m">底价¥</text>
										<text class="price2 col-m">{{ task.floor_price }}</text>
										<text class="price3">¥{{ task.goods_price }}</text>
									</view>
								</view>
							</view>
						</button>
					</form>
				</view>
			</view>

			<!-- 分割线 -->
			<view class="connect">
				<view class="connect-ring bgf-ring--left"><text></text></view>
				<view class="connect-ring bgf-ring--right"><text></text></view>
			</view>

			<!-- 砍价进度 -->
			<view class="bargain-wrap">
				<!-- 已砍数目 -->
				<view class="bargain-info">
					<view v-if="task.status" class="bargain-ing">
						<block v-if="!task.is_floor">
							<text>已砍</text>
							<text class="focal col-m">{{ task.cut_money }}</text>
							<text>元，还差</text>
							<text class="focal col-m">{{ task.surplus_money }}</text>
							<text>元</text>
						</block>
						<block v-else>
							<text>已砍至最低</text>
							<text class="focal col-m">{{ task.floor_price }}</text>
							<text>元，砍价成功！</text>
						</block>
					</view>
					<view v-else class="bargain-ing"><text class="col-9">该砍价活动已结束～</text></view>
				</view>
				<!-- 砍价进度条 -->
				<view class="bgn__process m-top30">
					<view class="bgn__process-bottom"><view class="bgn__process-process process--ani" :style="{ width: task.bargain_rate + '%' }"></view></view>
				</view>
				<!-- 操作按钮 -->
				<view class="btn-container m-top30 dis-flex flex-x-center">
					<!-- 立即购买 -->
					<form v-if="showBuyBtn" @submit="onCheckout" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="btn-item btn-item__buy" :class="{ complete: task.is_floor }"><text>立即购买</text></view>
						</button>
					</form>
					<!-- 分享给朋友 -->
					<button v-if="showShareBtn" open-type="share" class="btn-normal">
						<view class="btn-item btn-item__main"><text>邀请好友砍价</text></view>
					</button>
					<!-- 砍刀操作 -->
					<form v-if="showCatBtn" @submit="onHelpCut" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="btn-item btn-item__main btn-item-long"><text>帮TA砍一刀</text></view>
						</button>
					</form>
					<!-- 查看其他砍价活动 -->
					<form v-if="showOtherBtn" @submit="onTargetBargain" report-submit="true">
						<button formType="submit" class="btn-normal">
							<view class="btn-item btn-item__main btn-item-long"><text>查看其他砍价活动</text></view>
						</button>
					</form>
				</view>
				<!-- 到期时间 -->
				<view class="bargain-p" v-if="task.status">
					<view class="bargain-people" v-for="(item, index) in taskEndTime" :key="index">
						<text>活动还剩 {{ item.dynamic.hou }} : {{ item.dynamic.min }} : {{ item.dynamic.sec }} 结束，快来砍价吧~</text>
					</view>
				</view>
			</view>
			<!-- 好友助力榜 -->
			<view class="records-container" v-if="help_list.length">
				<view class="records">
					<view class="records-back"></view>
					<view class="records-content">
						<view class="records-h2"><text>好友助力榜</text></view>
						<view class="friend-help">
							<view class="records-item" v-for="(item, index) in help_list" :key="index">
								<view class="records-left">
									<image :src="item.user.avatarUrl"></image>
									<text>{{ item.user.nickName }}</text>
								</view>
								<view class="records-right semibold">
									<text class="bold">减</text>
									<text class="red">¥{{ item.cut_money }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<custom-dialog ref="ruleDialog"></custom-dialog>
	</view>
</template>

<script>
// 工具类
import Tools from '@/utils/Tools.js';

// 倒计时插件
import CountDown from '@/utils/countdown.js';

// 对话框插件
import Dialog from '@/components/dialog/dialog.js';
import customDialog from '@/components/dialog/index.vue';
import Route from '@/utils/Route.js';
export default {
	components: {
		customDialog
	},
	data() {
		return {
			// 砍价任务倒计时
			taskEndTime: [],

			task: {}, // 砍价任务详情
			active: {}, // 活动详情
			goods: {}, // 商品详情
			help_list: [], // 好友助力榜

			is_creater: false, // 是否为当前砍价任务的发起人
			is_cut: false, // 当前是否已砍
			setting: {}, // 砍价规则

			showBuyBtn: false, // 立即购买
			showShareBtn: false, // 邀请好友砍价
			showCatBtn: false, // 帮TA砍一刀
			showOtherBtn: false // 查看其他砍价活动
		};
	},
	onLoad(options) {
		this.task_id = options.task_id;
	},
	onShow() {
		this.getTaskDetail();
	},
	methods: {
		/**
		 * 获取砍价任务详情
		 */
		getTaskDetail() {
			this.$get(this.$api.getBargainTaskDetail, { task_id: this.task_id }, res => {
				this.initData(res.data);
			});
		},
		/**
		 * 初始化页面数据
		 */
		initData(data) {
			// 初始化：显示操作按钮
			this.initShowBtn(data);
			// 记录活动到期时间
			data.taskEndTime = [
				{
					date: data.task.end_time
				}
			];
			this.active = data.active;
			this.goods = data.goods;
			this.help_list = data.help_list;
			this.is_creater = data.is_creater;
			this.is_cut = data.is_cut;
			this.setting = data.setting;
			this.task = data.task;
			this.taskEndTime = data.taskEndTime;
			// 执行倒计时
			if (!data.task.is_end) {
				CountDown.onSetTimeList(this, 'taskEndTime');
			}
		},
		/**
		 * 初始化：显示操作按钮
		 */
		initShowBtn(data) {
			// 立即购买
			let showBuyBtn = data.is_creater && !data.task.is_buy && data.task.status && (!data.active.is_floor_buy || data.task.is_floor);
			// 帮砍一刀
			let showCatBtn = !data.is_creater && !data.is_cut && !data.task.is_floor && data.task.status;
			// 邀请好友砍价
			let showShareBtn = !showCatBtn && !data.task.is_floor && data.task.status;
			// 查看其他砍价活动
			let showOtherBtn = !showBuyBtn && !showShareBtn && !showCatBtn;
			this.showBuyBtn = showBuyBtn;
			this.showShareBtn = showShareBtn;
			this.showCatBtn = showCatBtn;
			this.showOtherBtn = showOtherBtn;
		},
		/**
		 * 跳转到商品详情
		 */
		onTargetGoods(e) {
			// 记录formid
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: `../goods/index?active_id=${this.task.active_id}`
			});
		},
		/**
		 * 跳转到砍价首页
		 */
		onTargetBargain(e) {
			// 记录formid
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '/pages/index/index'
			});
		},
		/**
		 * 帮砍一刀
		 */
		onHelpCut(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			// 按钮禁用时不允许操作(防重复提交)
			if (this.disabled == true) {
				return false;
			}
			// 设置按钮禁用
			this.disabled = true;

			// 提交到后端
			this.$get(
				this.$api.helpCutBargainTask,
				{ task_id: this.task_id },
				res => {
					Tools.showSuccess(res.msg, () => {
						Route.navigateBack();
					});
					this.getTaskDetail();
				},
				null,
				() => {
					this.disabled = false;
				}
			);
		},
		/**
		 * 立即购买
		 */
		onCheckout(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);

			// 跳转到结算台
			let option = Tools.urlEncode({
				order_type: 'bargain',
				task_id: this.task.task_id,
				goods_sku_id: this.task.spec_sku_id
			});
			Route.navigateTo({
				url: `../../flow/checkout?${option}`
			});
		},
		/**
		 * 跳转到首页
		 */
		onTargetHome(e) {
			// 记录formid
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '/pages/index/index'
			});
		},
		/**
		 * 显示砍价规则
		 */
		onToggleRules(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			// 显示砍价规则
			Dialog({
				title: '砍价规则',
				message: this.setting.bargain_rules,
				selector: 'ruleDialog',
				isScroll: true, // 滚动
				buttons: [
					{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}
				]
			});
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
.container {
	background: url(https://si.geilicdn.com/img-310900000167962321710a026860-unadjust_750_686.png) top no-repeat, linear-gradient(90deg, #fea044, #f9565d 63%, #e63378);
	background-size: 100% auto;
	min-height: 100%;
} /* 头部区域 */
.header {
	padding: 30rpx 30rpx;
}
.header .item-touch {
	color: #fff;
	font-size: 24rpx;
	padding: 7rpx 20rpx;
	background: rgba(0, 0, 0, 0.17);
	border-radius: 22rpx;
} /* 内容区域 */
.content {
	position: relative;
	box-sizing: border-box;
	padding: 10rpx 30rpx 60rpx 30rpx;
} /* 砍价信息 */
.infos-wrap {
	background: #fff;
	box-shadow: 0 4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
	padding: 0 30rpx 40rpx;
	border-radius: 16rpx;
}
.infos-top {
	position: relative;
	top: -42rpx;
	margin-bottom: -22rpx;
}
.infos-img {
	width: 120rpx;
	height: 120rpx;
	padding: 8rpx;
	background: #fff;
	overflow: hidden;
	margin: 0 auto;
	border-radius: 50%;
}
.infos-img image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.infos-name {
	margin: 8rpx auto 0;
	width: 80%;
	font-size: 26rpx;
	color: #9a9a9a;
	text-align: center;
	line-height: 32rpx;
}
.infos-prompt {
	text-align: center;
	font-size: 30rpx;
	color: #222;
	line-height: 48rpx;
	margin-bottom: 30rpx;
}
.infos-item {
	margin-top: 40rpx;
	display: flex;
}
.infos-item-img {
	flex: none;
	width: 180rpx;
	height: 180rpx;
}
.infos-item-img image {
	width: 100%;
	height: 100%;
}
.infos-item-info {
	margin-left: 25rpx;
	flex: auto;
}
.infos-item-name {
	font-size: 28rpx;
	color: #404040;
	line-height: 40rpx;
	height: 80rpx;
}
.infos-item-stock {
	/* margin-top: 8rpx; */
}
.infos-item-stock .stock-widget {
	display: inline-block;
	min-width: 100rpx;
	padding: 0 20rpx;
	background-image: linear-gradient(-90deg, #fe9c3f, #fb6253 99%);
	border-radius: 40rpx;
	height: 40rpx;
	font-size: 24rpx;
	color: #fff;
	line-height: 40rpx;
}
.infos-item-price {
	font-size: 0;
	margin-top: 12rpx;
}
.infos-item-price .price1 {
	font-size: 24rpx;
	line-height: 32rpx;
}
.infos-item-price .price2 {
	margin-left: 4rpx;
	font-size: 36rpx;
	line-height: 40rpx;
}
.infos-item-price .price3 {
	margin-left: 10rpx;
	font-size: 24rpx;
	color: #9a9a9a;
	line-height: 32rpx;
	text-decoration: line-through;
} /* 分割线 */
.connect {
	position: relative;
	height: 20rpx;
}
.connect-ring {
	position: absolute;
	top: -28rpx;
	height: 76rpx;
	width: 20rpx;
	padding: 8rpx 6rpx;
	box-sizing: border-box;
}
.connect-ring text {
	position: relative;
	z-index: 8;
	display: block;
	height: 100%;
	width: 100%;
	background: #fff;
	border-radius: 20rpx;
}
.connect-ring:after,
.connect-ring:before {
	content: '';
	position: absolute;
	z-index: 6;
	left: 0;
	height: 20rpx;
	width: 20rpx;
	border-radius: 20rpx;
}
.connect-ring.bgf-ring--left {
	left: 20rpx;
}
.connect-ring.bgf-ring--left:before {
	top: 0;
	background: #f4914e;
}
.connect-ring.bgf-ring--left:after {
	bottom: 0;
	background: #f4914e;
}
.connect-ring.bgf-ring--right {
	right: 20rpx;
}
.connect-ring.bgf-ring--right:before {
	top: 0;
	background: #e03e71;
}
.connect-ring.bgf-ring--right:after {
	bottom: 0;
	background: #e03e71;
} /* 砍价进度 */
.bargain-wrap {
	position: relative;
	background: #fff;
	padding: 40rpx 30rpx 30rpx;
	box-shadow: 0 4rpx 40rpx 0 rgba(144, 52, 52, 0.1);
	border-radius: 16rpx;
}
.bargain-info {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #404040;
	line-height: 40rpx;
}
.bargain-info .focal {
	margin: 0 5rpx;
}
.bargain-p {
	margin-top: 40rpx;
	min-height: 32rpx;
}
.bargain-people {
	font-size: 24rpx;
	color: #9a9a9a;
	text-align: center;
	line-height: 32rpx;
} /* 进度条 */
.bgn__process {
	position: relative;
	padding: 30rpx 0;
}
.bgn__process-bottom {
	z-index: 1;
	overflow: hidden;
	background-image: linear-gradient(0deg, #f0f2f7, #e8ebf3);
}
.bgn__process-bottom,
.bgn__process-process {
	position: relative;
	height: 30rpx;
	border-radius: 30rpx;
}
.bgn__process-process {
	background-image: linear-gradient(90deg, #ffc108, #fde586);
	background: #ffc108;
}
.bgn__process-process.process--ani:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 32rpx;
	top: 50%;
	left: 0;
	margin-top: -16rpx;
} /* 操作按钮 */
.btn-container .btn-item {
	color: #fff;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	border-radius: 15rpx;
	flex: 1;
}
.btn-item__buy {
	width: 240rpx;
	margin-right: 30rpx;
	background-image: linear-gradient(90deg, #fa9e1b, #fe5b1b);
	box-shadow: #fe5b1b 0 22rpx 48rpx -22rpx;
}
.btn-item__buy.complete {
	width: 360rpx;
	animation: btn_anim 0.9s linear infinite;
	transform-origin: center;
}
.btn-item__main {
	width: 320rpx;
	background-image: linear-gradient(90deg, #fe316c, #fd584e);
	box-shadow: #fd584e 0 22rpx 48rpx -22rpx;
	animation: btn_anim 0.9s linear infinite;
	transform-origin: center;
}
.btn-item-long {
	width: 460rpx;
} /* 按钮动画 */
@keyframes btn_anim {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	40% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}
} /* 好友助力榜 */
.records-container {
	margin-top: 44rpx;
}
.records {
	position: relative;
	color: #404040;
	box-shadow: 0 4rpx 40rpx 0 rgba(0, 0, 0, 0.08);
}
.records-back {
	position: absolute;
	left: -14rpx;
	right: -14rpx;
	top: -14rpx;
	height: 28rpx;
	border-radius: 28rpx;
	z-index: 1;
	background: #cb272d;
}
.records-content {
	position: relative;
	z-index: 2;
	background: #fff;
	padding: 40rpx 30rpx;
}
.records-h2 {
	display: flex;
	justify-content: space-between;
	height: 60rpx;
	align-items: center;
}
.records-h2 text {
	position: relative;
	font-weight: 700;
	font-size: 34rpx;
	line-height: 48rpx;
}
.friend-help {
	overflow: hidden;
	padding: 40rpx 0 20rpx;
	transition: max-height 0.6s ease-out; /* max-height: 280rpx; */
}
.records-left,
.records-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10rpx;
}
.records-left image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.records-left text {
	display: inline-block;
	margin-left: 14rpx;
}
.records-left text,
.records-right {
	font-size: 28rpx;
	line-height: 40rpx;
}
.records-right .red {
	color: #e53a40;
}
</style>
